<template>
  <div class="cate">
    <b-crumbs />
    <b-cate-form @open="open()" @close="close()" />
    <b-cate-table />
    <div class="add-wrapper" v-if="addShade">
      <b-shade @close="close()" />
      <b-cate-add @close="close()" />
    </div>
  </div>
</template>
<script>
import BCrumbs from "@/components/BCrumbs";
import BCateForm from "@/components/BCate/BCateForm";
import BCateTable from "@/components/BCate/BCateTable";
import BShade from "@/components/BShade";
import BCateAdd from "@/components/BCate/BCateAdd";
export default {
  name: "CateList",
  data() {
    return {
      addShade: false
    };
  },
  methods: {
    close() {
      this.addShade = false;
    },
    open() {
      this.addShade = true;
    }
  },
  components: {
    BCrumbs,
    BCateForm,
    BCateTable,
    BShade,
    BCateAdd
  }
};
</script>
<style lang="scss" scoped>
.add-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
